import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
import { STColumn, STComponent, STData } from '@delon/abc';
import { SFComponent } from '@delon/form';
import { AreaService } from '../../../routes/sys-setting/area-manage/area.service';
import { ColumnType, SPage } from '@shared/components/table-page/table-page.component';
import { HttpClient } from '@angular/common/http';
import { ApiService } from '@core/services/api';

@Component({
  selector: 'app-ngx-table',
  templateUrl: './ngx-table.component.html',
  styleUrls: ['./ngx-table.component.less']
})
export class NgxTableComponent implements OnInit, OnDestroy {
  @ViewChild('st', {static: false})st: STComponent;
  @ViewChild('sf', {static: false})sf: SFComponent;
  @Output()_selectChange = new EventEmitter();
  @Output()operateClick = new EventEmitter();
  @Input()tmp: TemplateRef<void>;
  @Input()process: (data: STData, rawData?: any) => STData[];
  @Input()
  set config(value: SPage) {
    this._config = value;
    if (value.data) {
      this.listData = value.data;
    }
    this.stConfig = value.columns.map(item => {
      if (item.filter) {
        if (!item.filter.hideSearch) {
          this.showSearch = true;
          this.searchSchema.properties[item.filter.index || item.index] = {
            type: 'string',
            format: item.filter.mode,
            title:  ''
          }
          if (item.filter.defatuts) {
            this.formData[item.filter.index || item.index] = item.filter.defatuts;
          }
          this.searchSchema.properties[item.filter.index || item.index].ui = {
            widget: item.filter.type,
            placeholder: item.filter.placeholder || item.title,
            mode: item.filter.mode,
            allowClear: true,
            width: 200
          }
          if (item.filter.items) {
            this.searchSchema.properties[item.filter.index || item.index].enum = item.filter.items;
          }
        }
      }
      const {filter, ...obj} = item;
      if (item.filter && item.filter.items && item.type !== ColumnType.badge &&item.type !== ColumnType.tag) {
        obj.format = (data, col) => {
          const res =  item.filter.items.find(_value => String(_value.value) === String(data[col.indexKey]));
          return res ? res.label : '-'
        }
      }
      return obj;
    })
    if (value.editBtn && value.editBtn.length > 0) {
      let btns;
      btns = value.editBtn.map(item => {
        return {
          text: item.title,
          type: item.type || 'none',
          iif: item.iif,
          click: (data) => {
            this.operateClick.emit({title: item.title, data});
          }
        }
      })
      this.stConfig.push({
        title: '操作',
        buttons: btns
      })
    }
  }
  formData: any = {};
  _config: SPage;
  param: any = {
    pageNum: 1,
    pageSize: 10,
    total: 3,
  };
  stConfig: STColumn[];
  loading = false;
  listData: Array<any>
  location$;
  searchSchema = {
    properties: {}
  };
  showSearch = false;
  arr = []
  isAllDisplayDataChecked = false;
  isIndeterminate = false;
  mapOfCheckedId: { [key: string]: boolean } = {};
  numberOfChecked = 0;
  filterTmp = new Map();
  searchData(reset: boolean = false): void {
      if (reset) {
        this.param.pageNum = 1;
      }
  }
  selectChange(e): void {
    if (e && e.type === 'checkbox') {
      this._selectChange.emit(e.checkbox);
    }
  }
  reload(): void {
    this.sf.reset();
    this.searchData(null);
  }
  exportFile(): void {

  }
  sort(e): void {
    console.log(e);
  }
  checkAll(value: boolean): void {
    this.listData.filter(item => !item.disabled).forEach(item => (this.mapOfCheckedId[item.id] = value));
    this.refreshStatus();
  }
  refreshStatus(): void {
    this.isAllDisplayDataChecked = this.listData
      .filter(item => !item.disabled)
      .every(item => this.mapOfCheckedId[item.id]);
    this.isIndeterminate =
      this.listData.filter(item => !item.disabled).some(item => this.mapOfCheckedId[item.id]) &&
      !this.isAllDisplayDataChecked;
    this.numberOfChecked = this.listData.filter(item => this.mapOfCheckedId[item.id]).length;
    console.log(this.mapOfCheckedId)
  }
  nzEvent(e, column): void {
    console.log(this.param);
  }
  getDataList(param): void {

  }
  constructor(
    private area: AreaService,
    private api: ApiService,
    private http: HttpClient
  ) { }

  ngOnInit() {
    this.location$ = this.area.getLocation().subscribe(res => {
      this.reload();
      console.log(1);
    });
  }
  ngOnDestroy() {
    this.location$.unsubscribe();
  }

}
